1) Heat fresh water
Use fresh, cold water for better oxygenation. Heat to 80–85°C for green, 90–95°C for oolong, and just‑off‑boil for black/herbal.
What you’ll learn
This page teaches you how to brew a balanced, flavorful cup of tea in five accessible steps. It uses semantic HTML, ARIA labels, proper color contrast, keyboard‑friendly controls, and responsive layout so everyone can follow along comfortably.
Step‑by‑Step
Follow these five descriptive steps. Check them off as you go. Images are decorative examples and should be replaced by your own photos in an images/ folder.
2) Warm your vessel
Swirl a little hot water in your teapot or cup, then discard. This stabilizes brewing temperature for consistent flavor.
3) Measure tea
Use ~2g (1 tsp) per 250ml. Adjust to taste. Place loose leaves in an infuser or use one teabag per cup.
4) Pour & steep
Pour hot water over the leaves. Steep: green 1–3 min, oolong 2–4, black 3–5, herbal 5–7. Avoid over‑steeping to reduce bitterness.
5) Taste & adjust
Remove leaves, taste, and tweak next time: temperature, time, or leaf amount. Add milk/lemon/honey only if it suits the tea style.
0 of 5 steps completed.
Adaptive & Accessibility Notes
- Semantic regions:
<header>,<nav>,<main>,<section>,<article>,<footer>. - ARIA landmarks/attributes: named
nav,role="status"live region,aria-labelledby/aria-describedbyfor step groups. - Keyboard support: visible focus states; checkboxes reachable via Tab and Space/Enter.
- Images include descriptive
alttext; replaceimages/*.jpgwith your own assets in an images/ folder. - Responsive grid via
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)). - Color contrast passes WCAG AA on dark background; motion reduced for users who prefer it.
Validate your code: HTML Validator · CSS Validator · a11y Checklist
Outro
You’ve got the method. Swap in your own photos, tweak copy for your topic if you prefer (e.g., pasta, pancakes, bike repair), and upload this folder (HTML + CSS in this file and an images/ folder) to your Sheridan server via cPanel.